$(function () {
  var isLeft = false
  var isright = true
  var initLength = 4
  var dlLength = $(".hot-pro-con>div dl").length
  var p = 1
  var totlP = Math.ceil(dlLength / initLength)
  console.log(p)
  var oMarginRight = parseInt($(".hot-pro-con").width()) + parseInt($(".hot-pro-con dl").css("margin-right"))
  // var oMarginRight= $(".hot-pro-con dl").css("margin-right").substr(-2,2)    


  // ==========================================
  var next = $('#hot-pro-control .next')
  var prev = $('#hot-pro-control .prev')
  var slideBox = $(".hot-pro-con>div.clearfix")
  next.click(function () {
    next_pic();
  })
  prev.click(function () {
    prev_pic();
  })

  function next_pic() {
    isLeft = true
    var newLeft = parseInt(slideBox.css("margin-left")) - oMarginRight;
    if (parseInt(slideBox.css("margin-left")) > -oMarginRight * (totlP - 1)) {
      slideBox.animate({
        "margin-left": newLeft + "px"
      }, 400)
    } else if (parseInt(slideBox.css("margin-left")) == -oMarginRight * (totlP - 1)) {
      slideBox.animate({
        "margin-left": 0 + "px"
      }, 400)
    }
  }

  function prev_pic() {
    var newLeft = parseInt(slideBox.css("margin-left")) + oMarginRight;
    if (isLeft && parseInt(slideBox.css("margin-left")) < 0) {
      slideBox.animate({
        "margin-left": newLeft + "px"
      }, 400)
    } else if (parseInt(slideBox.css("margin-left")) == 0) {
      slideBox.animate({
        "margin-left": -oMarginRight * (totlP - 1) + "px"
      }, 400)
    }
  }
})
